<template>
   <div class="app-container">
      <el-row :gutter="20">
         <el-col :span="6" :xs="24">
            <el-card class="box-card">
               <template v-slot:header>
                 <div class="clearfix">
                   <span>个人信息</span>
                 </div>
               </template>
               <div>
                  <div class="text-center">
                     <userAvatar />
                  </div>
                  <div class="info-box">
                    <div class="info-item">
                      <svg-icon icon-class="user" class="svg" />
                      <p class="label">用户名称</p>
                      <p class="value">{{ state.user.userName }}</p>
                    </div>
                    <div class="info-item">
                      <svg-icon icon-class="phone" class="svg" />
                      <p class="label">手机号码</p>
                      <p class="value">{{ state.user.phonenumber }}</p>
                    </div>
                    <div class="info-item">
                      <svg-icon icon-class="email" class="svg" />
                      <p class="label">用户邮箱</p>
                      <p class="value">{{ state.user.email }}</p>
                    </div>
                    <!-- <div class="info-item">
                      <svg-icon icon-class="tree" class="svg" />
                      <p class="label">所属部门</p>
                      <p class="value">{{ state.company }}/{{ state.user.departName }}</p>
                    </div> -->
                    <div class="info-item">
                      <svg-icon icon-class="peoples" class="svg" />
                      <p class="label">所属角色</p>
                      <p class="value">{{ state.roleGroup }}</p>
                    </div>
                    <div class="info-item">
                      <svg-icon icon-class="date" class="svg" />
                      <p class="label">创建日期</p>
                      <p class="value">{{ state.user.createTime }}</p>
                    </div>
                  </div>
               </div>
            </el-card>
         </el-col>
         <el-col :span="18" :xs="24">
            <el-card>
               <template v-slot:header>
                 <div class="clearfix">
                   <span>基本资料</span>
                 </div>
               </template>
               <el-tabs v-model="activeTab">
                  <el-tab-pane label="基本资料" name="userinfo">
                     <userInfo :user="state.user" />
                  </el-tab-pane>
                  <el-tab-pane label="修改密码" name="resetPwd">
                     <resetPwd />
                  </el-tab-pane>
               </el-tabs>
            </el-card>
         </el-col>
      </el-row>
   </div>
</template>

<script setup name="Profile">
import userAvatar from "./userAvatar";
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
import { getUserProfile } from "@/api/system/user";

const activeTab = ref("userinfo");
const state = reactive({
  user: {},
  roleGroup: {},
  company: ''
});

function getUser() {
  getUserProfile().then(response => {
    state.user = response.data
    state.roleGroup = response.roleGroup
    // const companyInfo = response.company || {}
    // state.company = companyInfo.fatherCompanyName + '/'
    // if (companyInfo.name) {
    //   state.company += companyInfo.name
    // }
  });
};

getUser();
</script>

<style lang="scss" scoped>
.info-box {
  margin-top: 20px;
  border-top: 1px solid #e7eaec;
}

.info-item {
  display: flex;
  align-items: baseline;
  // border-top: 1px solid #e7eaec;
  border-bottom: 1px solid #e7eaec;
  padding: 11px 0;
  font-size: 0;

  .svg {
    width: 13px;
    height: 13px;
    object-fit: contain;
  }

  .label {
    width: 65px;
    font-size: 13px;
    flex-shrink: 0;
    margin-left: 3px;
  }

  .value {
    font-size: 13px;
    word-break: break-all;
    flex: 1;
    text-align: right;
  }
}
</style>
